<template>
  <div class="inviteFriendsView" @click.stop="jumpRecord">
    <!-- 标题 -->
    <div
      class="title"
      :class="{
        'title-fri': lotteryStore.isFri,
      }"
    >
      <div class="title-content items-center">
        <img
          v-if="!lotteryStore.isFri"
          class="title-content-left"
          src="/image/lottery-v3/title-icon.svg"
        />
        <img
          v-else
          class="title-content-left"
          src="/image/lottery-v3/titlefri-icon.svg"
        />
        <div
          class="title-content-text"
          :class="{
            'title-content-text-fri': lotteryStore.isFri,
          }"
        >
          {{ $t("lotteryMoney.tjjl") }}
        </div>
        <img
          v-if="!lotteryStore.isFri"
          class="title-content-right"
          src="/image/lottery-v3/title-icon.svg"
        />
        <img
          v-else
          class="title-content-right"
          src="/image/lottery-v3/titlefri-icon.svg"
        />
      </div>
    </div>
    <!-- 好友注册 -->
    <div class="content">
      <div class="content-title">
        {{ $t("lotteryMoney.hyzchsc") }}
      </div>
      <div class="content-box">
        <!-- 免费下注卡 -->
        <div class="item items-center">
          <div class="item-title">{{ $t("lotteryMoney.freeCard") }}</div>
          <div class="items-center">
            <div class="item-value">* {{ source.mfxz }}</div>
            <img class="item-icon" src="/image/bet-blue.svg" />
          </div>
        </div>
        <!-- BDC -->
        <div class="item items-center">
          <div class="item-title">BDC</div>
          <div class="items-center">
            <div class="item-value">+ {{ source.bdcCount }}</div>
            <img class="item-icon" src="/image/bdc.svg" />
          </div>
        </div>
        <!-- APY -->
        <div class="item items-center">
          <div class="item-title">APY</div>
          <div class="items-center">
            <div class="item-value">+ {{ source.apy }}%</div>
            <img class="item-icon" src="/image/pledge-green.svg" />
          </div>
        </div>
        <!--  -->
        <div class="item items-center" style="margin-bottom: 0">
          <div class="item-title">{{ $t("lotteryMoney.yjhhe") }}</div>
          <div class="items-center">
            <div class="item-value">+ 100</div>
            <img class="item-icon" src="/image/money-green.svg" />
          </div>
        </div>
      </div>
      <!-- 底部 icon -->
      <img
        class="content-bottom"
        src="/image/lottery-v3/inviteFriendsView-bt-img.svg"
      />
    </div>
    <!-- 分享好友 -->
    <div class="footer">
      {{ $t("lotteryMoney.tjhy") }}
    </div>
  </div>
</template>
<script setup lang="ts" name="inviteFriendsView">
import { useGlobalStore } from "~~/store/global";
import { useLotteryV3Store } from "~~/store/modules/lottery-v3";
import { useEventBus, useClipboard } from "@vueuse/core";

const props = withDefaults(
  defineProps<{
    source: any;
  }>(),
  {
    source: {},
  }
);

const globalStore = useGlobalStore();
const lotteryStore = useLotteryV3Store();

const { t } = useI18n();
// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
  sharePage: "/invite-friends/v3/invite",
});

// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 分享地址
const shareUrl = computed(() => {
  return (
    file.sharePage +
    "?hiddenBar=1" +
    `&language=${globalStore.$state.language}` +
    `&packageId=${globalStore.$state.packageId}` +
    `&sourceType=12` +
    `&code=${lotteryStore.$state.inviteLotteryCode}`
  );
});

const jumpRecord = () => {
  firebase?.logEvent("BDC_H5_LotteryV3_invite_PUV"); // 埋点访问
  navigateI18nTo({
    path: "/lottery-v3/invite-friends",
  });
};
const inviteFriendsBridge = useEventBus("lottery-v3-inviteFriends-bridge-emit");
onMounted(() => {
  inviteFriendsBridge.on(() => {
    shareApp();
  });
});
onBeforeUnmount(() => {
  inviteFriendsBridge && inviteFriendsBridge.reset();
});

/****************** 复制 ******************/
const saveCopy = () => {
  if (!file.sharePage) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast({
      message: t("mvp.other.bzcjtb"),
      "z-index": 9999999,
    });
  } else {
    if (!lotteryStore.$state.inviteLotteryCode) {
      firebase?.logEvent("BDC_H5_invite_friends_copy_NotCode_PUV"); // 埋点
    }

    copy(shareUrl.value);
    showToast({
      message: t("mvp.other.fzcg"),
      "z-index": 9999999,
    });
  }
};

/****************** 分享 ******************/
let shareLoading = false;
const shareApp = () => {
  if (shareLoading) return;
  try {
    shareLoading = true;
    saveCopy();
    console.log("分享地址:", shareUrl.value);
    if (!lotteryStore.$state.inviteLotteryCode) {
      firebase?.logEvent("BDC_H5_invite_friends_shareApp_NotCode_PUV"); // 埋点
    }
    bridge.onShare(t("lotteryMoney.hyzldmfcj"), shareUrl.value);
    firebase?.logEvent("BDC_H5_LotteryV3_inviteFriends_shareApp_Click"); // 埋点访问
  } catch (error) {
    console.log(error);
  } finally {
    // 延时 1s，防止用户连续点击
    setTimeout(() => {
      shareLoading = false;
    }, 1000);
  }
};
</script>
<style lang="scss" scoped>
.inviteFriendsView {
  position: relative;
  background-color: #fff;
  margin: 10 * 2px 15 * 2px;
  padding: 10 * 2px;
  border-radius: 12 * 2px;
}
.title {
  position: relative;
  margin-top: 10 * 2px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0, 123, 255, 0) 0%,
    rgba(0, 123, 255, 1) 50%,
    rgba(0, 123, 255, 0) 100%
  );
  &-fri {
    background: linear-gradient(
      90deg,
      rgba(255, 155, 1, 0) 0%,
      rgba(255, 155, 1, 1) 50%,
      rgba(255, 155, 1, 0) 100%
    );
  }

  &-content {
    position: absolute;
    top: -11 * 2px;
    left: 50%;
    transform: translateX(-50%);

    &-left {
      position: relative;
      right: -0.8px;
      height: 22 * 2px;
    }
    &-text {
      color: #fff;
      font-size: 13 * 2px;
      font-weight: 590;
      background-color: #007bff;
      padding: 0 * 2px 8 * 2px;
      height: 22 * 2px;
      line-height: 22 * 2px;
      white-space: nowrap;
      &-fri {
        background: #ff9b01;
      }
    }
    &-right {
      position: relative;
      left: -0.8px;
      transform: rotateY(180deg);
      height: 22 * 2px;
    }
  }
}

.content {
  position: relative;
  width: 100%;
  margin-top: 20 * 2px;
  margin-bottom: 15 * 2px;

  &-title {
    text-align: center;
    color: #141924;
    font-size: 12 * 2px;
    font-weight: 400;
    margin-bottom: 10 * 2px;
  }

  &-box {
    padding: 12 * 2px 10 * 2px;
    border-radius: 8 * 2px;
    border: 1px dashed #e86500;
    background: #fff5e5;
  }
  &-bottom {
    margin-left: calc((100% - 322 * 2px) / 2);
    width: 322 * 2px;
    height: 11 * 2px;
  }
}

.item {
  margin-bottom: 20 * 2px;
  justify-content: space-between;

  &-icon {
    width: 20 * 2px;
    height: 20 * 2px;
  }

  &-value {
    color: #d5602e;
    font-size: 17 * 2px;
    font-weight: 700;
    margin-right: 10 * 2px;
  }

  &-title {
    color: #807666;
    font-size: 14 * 2px;
    font-weight: 510;
  }
}

.footer {
  width: 100%;
  height: 36 * 2px;
  line-height: 36 * 2px;
  background-image: url("/image/lottery-v3/invite-friends-view-btn.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  text-align: center;

  color: #fff;
  font-size: 14 * 2px;
  font-weight: 600;
}
</style>
